<template>
  <div class="production_wrap">
    <div class="production_img">
      <div class="img_tit">吉祥结系列</div>
      <div class="img_desc">
        ASISSI选取故宫博物馆馆藏清代文物【金累丝连环耳环】<br />为灵感元素，吉祥结作为设计元素，不仅代表着悠久历史<br />中的吉祥祝福，更传达了一种超越时间的美好寓意。将博<br />物馆之息凝聚于ASISSI设计理念中，勾勒出隐匿在珠宝<br />细节里的生机，赋予新的系列美感、灵动感和生命感。
      </div>
    </div>

    <div v-for="(item, index) in procardList" :key="index">
      <div class="production_title_wrap">
        <div class="production_inner">
          <div class="inner_left">
            <img src="../../assets/asissi/tupianright.png" alt="" />
          </div>
          <div class="inner_center" style="width: 60%">
            <div class="production_title">
              {{ item.label }}
            </div>
          </div>
          <div class="inner_right">
            <img src="../../assets/asissi/tupianleft.png" alt="" />
          </div>
        </div>
      </div>
      <imageScroll :showImages="item.products" />
    </div>
    <CallMe />
  </div>
</template>

<script>
import imageScroll from "./imageScroll.vue";
import CallMe from "@/components/callme/index";
export default {
  data() {
    return {
      procardList: [
        {
          label: "吉祥结耳环",
          products: [
            {
              src: require("@/assets/asissi/pro/JiXiangJie/products/吉祥结耳环.png"),
              txt: "吉祥结耳环",
            },
          ],
          video: "",
        },
        {
          label: "吉祥结戒指",
          products: [
            {
              src: require("@/assets/asissi/pro/JiXiangJie/products/吉祥结戒指.png"),
              txt: "吉祥结戒指",
            },
          ],
          video: "",
        },
        {
          label: "吉祥结项链",
          products: [
            {
              src: require("@/assets/asissi/pro/JiXiangJie/products/吉祥结项链.png"),
              txt: "吉祥结项链",
            },
          ],
          video: "",
        },
      ],
    };
  },
  components: {
    imageScroll,
    CallMe,
  },
};
</script>

<style lang="scss" scoped>
.production_wrap {
  width: 100%;
  .production_img {
    width: 100%;
    height: 600px;
    @media screen and (max-width: 768px) {
      height: 50vw;
    }
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    .img_tit {
      font-size: 60px;
      font-weight: bold;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
      }
    }
    .img_desc {
      font-size: 32px;
      margin-top: 20px;
      @media screen and (max-width: 768px) {
        font-size: 0.85rem;
      }
    }
    .img_btn {
      width: 180px;
      height: 50px;
      border: solid 1px rgb(255, 166, 0);
      background: rgba(25, 166, 0, 0.1);
      color: orange;
      position: absolute;
      bottom: 15%;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.5s;
      &:hover {
        color: #fff;
        background: orange;
      }
      @media screen and (max-width: 768px) {
        width: 80px;
        height: 30px;
        font-size: 14px;
      }
    }
  }
  .production_title_wrap {
    width: 100%;
    margin-top: 50px;
    @media screen and (max-width: 768px) {
      margin-top: 30px;
    }
    .production_inner {
      display: flex;
      justify-content: center;
      .inner_left {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        @media screen and (max-width: 768px) {
          flex: 1;
        }
        img {
          width: 30%;
        }
      }
      .inner_center {
        width: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 50px;
        @media screen and (max-width: 768px) {
          flex: 2.2;
        }
        .production_title {
          font-size: 40px;
          font-weight: bold;
          @media screen and (max-width: 768px) {
            font-size: 1rem;
          }
        }
        .production_desc {
          font-size: 16px;
          color: #787878;
          margin-top: 10px;
          @media screen and (max-width: 768px) {
            margin-top: 10px;
            font-size: 14px;
          }
        }
      }
      .inner_right {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        @media screen and (max-width: 768px) {
          flex: 1;
        }
        img {
          width: 30%;
        }
      }
    }
  }
  .production_box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 100px;
    @media screen and (max-width: 768px) {
      justify-content: space-around;
      flex-wrap: wrap;
    }
    .production_item {
      width: 30%;
      display: flex;
      margin-left: 80px;
      @media screen and (max-width: 768px) {
        width: 90%;
        margin-left: 0;
        margin-top: 20px;
      }
      .item_left {
        width: 50%;
        padding: 0 30px;
        img {
          width: 100%;
        }
      }
      .item_right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        @media screen and (max-width: 768px) {
          margin-left: 10px;
        }
        .right_tit {
          font-weight: bold;
          font-size: 26px;
          @media screen and (max-width: 768px) {
            font-size: 1rem;
          }
        }
        .right_desc {
          color: #717171;
          font-size: 16px;
          @media screen and (max-width: 768px) {
            font-size: 0.8rem;
            line-height: 18px;
          }
        }
      }
    }
  }
  p {
    text-align: center;
    color: #3b3b3b;
    font-weight: bold;
    font-size: 20px;
    line-height: 100px;
    @media screen and (max-width: 768px) {
      font-size: 0.9rem;
      padding: 15px 0;
    }
  }
  .production_card {
    display: flex;
    justify-content: center;
  }
  .advantage_out_wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .carousel_pro {
    width: 60%;
    margin: 60px auto;
    .carousel_pro_item {
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
.production_img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../assets/asissi/pro/JiXiangJie/back.png") 0 0 no-repeat;
  background-size: 100% 100%;
  opacity: 0.5; /* 设置图片的透明度 */
  z-index: -1; /* 确保它在内容之下 */
}
</style>
